<template>
  <div class="detail">
    <div v-for="(item, index) of detailList" :key="index">
      <div class="detail__item border-bottom">
        <span class="icon"></span>
        <span class="title">{{item.title}}</span>
      </div>
      <detail-list :detailList="item.children"></detail-list>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'DetailList',
  props: {
    detailList: Array
  }
}
</script>

<style lang="scss" scoped>
  @import "styles/scss/variable.scss";
  .detail {
    padding: 0 .2rem;
    background: #fff;
    &__item {
      padding: .26rem 0rem;
      font-size: $fontSize-regular;
      color: $color-text-regular;
      overflow: hidden;
      .icon {
        float: left;
        display: inline-block;
        position: relative;
        width: .36rem;
        height: .36rem;
        background: url(//s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat;
        margin-right: .1rem;
        background-size: .4rem 3rem;
      }
      .title {
        position: relative;
        float: left;
        top: .03rem;
      }
    }
  }
</style>
